<!-- 助力比赛--个人参赛资料 -->
<template>
  <div id="assistCompetitionDetails">
    <c-title :text="info.participant_info && info.participant_info.name"></c-title>
    <div class="mg-12 t-l">
      <div class="b-radius-8  gradient pd-10 flex-a-s mb-8 border-2">
        <img :src="info.participant_info && info.participant_info.picture" alt="" class="w-100 b-radius-8 mg-0" style="object-fit: cover;"/>
        <div class="flex-1 flex-column flex-j-sb pl-10">
          <div class="f-24 f-bold mb-8">{{ info.participant_info && info.participant_info.name }}</div>
          <div class="">
            <div class="flex-a-c mb-6">
              <div class="b-radius-8 bg-FDE1E1 color-F15353 pd-5 f-10">
                <i class="iconfont icon-fontclass-zhibo f-12"></i>
              </div>
              <div class="pl-5">排名：{{ info.participant_info && info.participant_info.rank }}</div>
            </div>
            <div class="flex-a-c mb-6">
              <div class="b-radius-8 bg-FDE1E1 color-F15353 pd-5 f-10">
                <i class="iconfont icon-huo f-12"></i>
              </div>
              <div class="pl-5">人气：{{ info.participant_info && info.participant_info.score }}</div>
            </div>
            <div class="f-13 color-6E6E79">距离上一名还差{{ info.participant_info && info.participant_info.distance_up }}人气</div>
          </div>
        </div>
      </div>

      <div class="b-radius-8 bg-white pd-10 img-box">
        <img v-for="(item, index) in info.image_detail" :src="item" alt="" :key="index" />
      </div>
    </div>

    <div style="height: 4.875rem;"></div>

    <div class="share-box flex-column flex-j-c" v-if="info.new_poster_sign" @click.stop="getPoster">
      <i class="iconfont icon-fenxiang1"></i>
      <div class="f-10">分享</div>
    </div>

    <div class="bottom-btn set-pc-style">
      <button :style="{ 'background-image': 'url(' + info.assist_button_url + ')' }" @click="onClistShow('showSheet', true)" class="btn f-15 f-bold color-ffffff">给Ta助力</button>
    </div>

    <van-popup v-model="showSheet" position="bottom" closeable round>
      <van-grid :border="false" :column-num="2" clickable style="padding: 2rem 0;">
        <van-grid-item v-for="(item, index) in options" :key="index" :text="item.name" @click="onClickOptions(index)">
          <template #icon>
            <div class="sheet-icon mb-6" :style="{ 'background-color': item.color }">
              <i class="iconfont color-ffffff" :class="item.icon"></i>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </van-popup>

    <van-popup v-model="showReward" position="bottom" round>
      <van-nav-bar title="打赏" right-text="关闭" @click-right="onClistShow('showReward', false)" />
      <van-grid :border="false" :column-num="4" clickable>
        <van-grid-item v-for="(item, index) in giftlist" :key="index" @click.stop="onSelectGigt(item.id)">
          <template #default>
            <div class="reward-item" :class="{ active: activeReward == item.id }">
              <div class="mb-6">
                <img class="w-50 h-50" :src="item.icon_url" alt="" />
              </div>
              <div class="f-13 color-000000 ">{{ item.name }}</div>
              <div class="color-6E6E79 f-12">{{ item.tip_number }}{{balance}}</div>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
      <div v-if="!giftlist || giftlist.length == 0">
        <van-empty description="暂无礼物可进行打赏" />
      </div>
      <van-cell :title="`我当前${balance}数量${credit}`" center title-class="t-l">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-button round type="danger" size="small" class="w-100" @click="toReward">打赏</van-button>
        </template>
      </van-cell>
    </van-popup>

    <van-popup v-model="showPoster" round closeable>
      <img :src="poster_url" alt="" style="width:300px;display: block; " >
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      credit: 0,
      showSheet: false,
      showReward: false,
      showPoster: false,
      activeReward: 0,
      poster_url: null,
      options: [
        { name: "人气助力", icon: "icon-a-shandian1 f-20", color: "#FF6542" },
        { name: "打赏", icon: "icon-pay_yue f-40", color: "#FF9329" }
      ],
      balance: '',
      giftlist: []
    };
  },

  activated() {
    this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { activity_id, signup_record_id } = this.$route.params;
      let { result, msg, data } = await $http.get(
        "plugin.assist-competition.frontend.assist-voting-detail.index",
        {
          activity_id,
          signup_record_id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.balance = this.fun.getCustomTextLang('member_center.credit','余额');
      this.info = data;
      this.fun.setWXTitle(this.info.participant_info && this.info.participant_info.name || '');
    },
    onClickOptions(index) {
      if (index == 0) this.helpVote();
      if (index == 1) this.getGift();
    },
    async helpVote() {
      let { activity_id, signup_record_id } = this.$route.params;
      let { result, msg, data } = await $http.get(
        "plugin.assist-competition.frontend.assist-voting-detail.assist-action",
        {
          activity_id,
          signup_record_id
        },
        "."
      );
      this.$toast(msg);
      this.getData();
    },
    async getGift() {
      let { activity_id, signup_record_id } = this.$route.params;
      let { result, msg, data } = await $http.get(
        "plugin.assist-competition.frontend.assist-voting-detail.get-tip-gifts-list",
        {
          activity_id,
          signup_record_id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.giftlist = data.data;
      this.credit = data.credit;
      this.activeReward = data?.data[0]?.id || 0;
      this.showReward = true;
    },
    onSelectGigt(id) {
      this.activeReward = id;
    },
    async toReward() {
      if(!this.activeReward) return this.$toast('请选择打赏礼物');
      let { activity_id, signup_record_id } = this.$route.params;
      let { result, msg, data } = await $http.get(
        "plugin.assist-competition.frontend.assist-voting-detail.tip-action",
        {
          activity_id,
          signup_record_id,
          tip_gifts_id: this.activeReward
        },
        "."
      );
      if (result == 0) {
        if (data.err_scope) {
          this.$dialog
            .confirm({
              confirmButtonText: '去充值',
              message: `${this.balance}不足`
            })
            .then(() => {
              this.$router.push(this.fun.getUrl("balance_recharge", {})); //余额不足，去充值余额
            })
            .catch(() => {
              // on cancel
            });
        }
        return;
      }
      this.$toast(msg);
      this.getData();
      this.showSheet = false;
      this.showReward = false;
    },
    async getPoster() {
      let { activity_id, signup_record_id } = this.$route.params;
      let { result, msg, data } = await $http.get(
        "plugin.assist-competition.frontend.assist-voting-detail.get-poster",
        {
          activity_id,
          signup_record_id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.poster_url = data.poster;
      this.showPoster = true;
    },
    onClistShow(name, value) {
      this[name] = value;
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.b-radius-8 {
  border-radius: 0.5rem;
}
.gradient {
  background: linear-gradient(180deg, #fceaea 0%, #ffffff 100%);
}
.bg-white {
  background: #fff;
}
.mg-0 {
  margin: 0;
}
.mg-12 {
  margin: 0.75rem;
}
.mb-8 {
  margin-bottom: 0.5rem;
}
.mb-6 {
  margin-bottom: 0.375rem;
}
.pd-5 {
  padding: 0.3125rem;
}
.pd-10 {
  padding: 0.625rem;
}
.w-50 {
  width: 3.125rem;
}
.w-100 {
  width: 6.25rem;
}
.h-50 {
  height: 3.125rem;
}
.flex-1 {
  flex: 1;
}
.pl-5 {
  padding-left: 0.3125rem;
}
.pl-10 {
  padding-left: 0.625rem;
}
.bg-FDE1E1 {
  background: #fde1e1;
}
.color-ffffff {
  color: #ffffff;
}
.color-F15353 {
  color: #f15353;
}
.color-6E6E79 {
  color: #6e6e79;
}
.color-000000 {
  color: #000000;
}
.border-2 {
  border: 2px solid #ffffff;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 0.75rem 1.5rem;
  background: #fff;
  .btn {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 21.875rem;
    height: 2.5rem;
    border: none;
    border-radius: 20px;
  }
}
.sheet-icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
}
.reward-item {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ffffff;
}
.reward-item.active {
  border: 1px solid #f9f9f9;
  background: #f9f9f9;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #d6d6dc;
}

.share-box {
  width: 44px;
  height: 44px;
  background: #ffffff;
  box-shadow: 0px 1 3px 1px #f0f0f1;
  border: 1px solid #d6d6dc;
  border-radius: 44px;
  position: fixed;
  bottom: 10rem;
  right: 50%;
  transform: translateX(11rem);
}
.img-box {
  img {
    width: 100%;
  }
}
</style>
